// pages/todos/index.js
Page({

  // 版本一：  todos的代码逻辑分析
  //  1. 给input标签绑定一个input事件，时刻获取内容，并把它写入data里面的inputValue
  //  2. 点击添加按钮，把data里面的inputValue的值，追加到数组list里面
  //    2.1 先把list从data里面拿出来
  //    2.2 list.push(数据)
  //       2.2.1 在追加之前先判断，任务是否已有，如已存在则不添加
  //    2.3 把追加完数据的list 通过this.setData写入data里面
  //  3. 点击icon删除小图标，对list数据进行删除
  //    3.1 点击哪个小图标则删除哪个
  
   // 版本二
  //  1. 先去本地获取数据，追加到data的list里面，把数据渲染回页面(做了2.4。存储之后，再回来做)
  //  2. 给input标签绑定一个input事件，时刻获取内容，并把它写入data里面的inputValue
  //  3. 点击添加按钮，把data里面的inputValue的值，追加到数组list里面
  //    2.1 先把list从data里面拿出来
  //    2.2 list.push(数据)
  //       2.2.1 在追加之前先判断，任务是否已有，如已存在则不添加
  //    2.3 把追加完数据的list 通过this.setData写入data里面
  //    2.4 把数据写入本地存储
  //  3. 点击icon删除小图标，对list数据进行删除
  //    3.1 点击哪个小图标则删除哪个
  //    2.4 把删除后的数据写入本地存储


  /**
   * 页面的初始数据
   */
  data: {
    userName:"???",
    inputValue:"", // 输入框的任务内容
    list:[] // 数组里面存放的是列表任务
  },

  // bindINput的事件处理函数
  handleInp(e){
    // 时刻获取内容，并把它写入data里面的inputValue
    // console.log(e)
    var neirong = e.detail.value;
    // 通过this.setData写入data
    this.setData({
      inputValue: neirong
    })
    // console.log(this.data.inputValue)
  },
  // 添加按钮的处理函数
  handleTap(){
    // bug2 return可以阻止代码的执行
    if(!this.data.inputValue){
      wx.showToast({
        title: '输入的内容不能为空',
        icon: 'none',
        duration: 2000
      })
      // 当this.data.inputValue为空的时候，阻止代码执行
      return;
    }
  //版本一得添加：
    // 把data里面的inputValue的值，追加到数组list里面
    // console.log(this.data.inputValue)
    // 2.1 先把list从data里面拿出来
    // var list = this.data.list;
    // push （在数组的最后插入一个元素） unshift pop shift 。。。
    // indexOf（获取某个元素在数组中的下标）， 如果这个元素不存在数组中，则返回-1
    // 2.2 把数据追加到list
    // 2.2.1 bug1 在追加之前先判断，任务是否已有，如已存在则不添加
    // if (list.indexOf(this.data.inputValue) == -1){
    //   list.push(this.data.inputValue);
    // }
    // 2.3 写入data里面的list
    // {键：值} es6： 当键和值是一样的变量名时，可以简写为 {变量}
    // this.setData({
    //   list:list
    // })
    // this.setData({
    //   list
    // })


    //版本二得添加：
    // 2.1 先把list从data里面拿出来
    var list = this.data.list;
    // 2.2 创建一个 Set对象，他是一个伪数组结构，他自己在内部过滤掉重复的数据
    var set = new Set(list);
    // 2.2.1
    // 把数据追加到set里面  通过set对象提供add方法添加
    set.add(this.data.inputValue)
    // 2.3 把他存储到data的list
    this.setData({
      // ... 扩展运算符，把set每一个元素取出来，放到[]
      list: [...set]
    });
    // 2.4 把数据写入本地存储
    wx.setStorage({
      key: 'todoList',
      data: this.data.list,
    })
    // 把inputValue清空
    this.setData({
      inputValue:""
    })
   
  },
  // 删除的处理函数
  handleDelete(e){
    // 3.1 点击哪个小图标则删除哪个
    // 3.2 获取小图标的自定义属性值
    var index = e.currentTarget.dataset.index;
    // 3.3 把数组获取出来
    var list = this.data.list;
    // 3.4 把数组对应的数据删除 splice, 从index位置开始，删除一个
    list.splice(index,1)
    // 3.5 把数据写入data
    this.setData({
      list
    })
    // 3.5 把数据写入本地存储
    wx.setStorage({
      key: 'todoList',
      data: this.data.list,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // onLoad里面可以接受页面跳转带来的参数
    console.log(options)
    // 拿到页面跳转的参数，写入data
    this.setData({
      userName: options.userName
    })
    // call bind aplly
    var _this = this;
    // 1. 先去本地获取数据，追加到data的list里面，(做了2.4存储之后，再回来做)
    // console.log(localStorage) 
    wx.getStorage({
      key: 'todoList',
      // 获取数据成果的一个回调函数
      success: function(res) {
        // res就是你获取到的数据
        console.log(res)
        // res.data里面才是我们要的数组
        _this.setData({
          list:res.data
        })
      },
      // es6 的语法·： 箭头函数
      success: (res)=>{
        // res就是你获取到的数据
        console.log(res)
        // res.data里面才是我们要的数组
        // 箭头函数的this永远指向他的外层
        this.setData({
          list:res.data
        })
      },
      fail:function(res){
        // 获取失败的一个回调函数
        console.log(res)
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})